<template>
	
	<view class="userLayout">
		<view class="avatar">
			<view class="box">
				<view class="inner">
					<image  :src="avatarUrl || '../../static/images/defAvatar.png'" mode="aspectFill"></image>
					<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="btn">按钮</button>
					<view class="msk" v-if="uploadState">上传{{percentCompleted}}%</view>
				</view>
				
				<view class="icon">
					<uni-icons type="camera" color="#fff" size="16"></uni-icons>
				</view>
				
				<view class="text">点击更换头像</view>
			</view>
		</view>
		
		
		<view class="list">
			<uni-list>
				<uni-list-item showArrow title="用户id"  clickable :rightText="userInfo._id" @click="clickID(userInfo._id)" />
					
				<uni-list-item showArrow title="昵称" v-model="userInfo.username" clickable :rightText="userInfo.username" @click="clickUserName"  />
				
				<uni-list-item showArrow title="性别" clickable :rightText="formatGender(userInfo.gender)" @click="clickGender" />
				
				<uni-list-item showArrow title="注册时间"  :rightText="formatDate(userInfo.register_date)"  />
			</uni-list>
		</view>
		
	</view>
	
	

	
	
	<uni-popup ref="userNamePop" type="dialog">
		<uni-popup-dialog mode="input" title="修改昵称" :value="userInfo.username" maxlength="10" placeholder="请输入昵称" message="请输入昵称111" 
		 @confirm="userNameConfirm">
		</uni-popup-dialog>
	</uni-popup>
	
	<uni-popup ref="genderPop" type="dialog">
		<uni-popup-dialog mode="input" title="修改性别" :value="userInfo.gender" message="请输入性别" @confirm="genderConfirm">
				<radio-group class="ghenderForm" @change="genderChange">
					<label class="radio" v-for="item in genderGroup" :key="item.value">
						<radio :value="item.value" :checked="item.value == sex" style="transform: scale(0.7);" />
						{{item.text}}
					</label>
				</radio-group>
		</uni-popup-dialog>
	</uni-popup>
	
	
	
	
</template>

<script setup>
import {computed, ref} from 'vue'
import {useUserStore} from '@/stores/user.js'
import {formatDate,formatGender,formatDateDay,
formatDateHour,isAdminRole} from '@/utils/tools.js'

const userNamePop = ref(null)
const genderPop = ref(null)
const userStore = useUserStore() 
const userInfo = computed(()=>userStore.userInfo) // 计算属性的目的是为了搞成响应式。防止数据更新，页面还是显示旧的
const sex = ref(userInfo.value.gender || 0)
const avatarUrl = ref(userInfo.value.avatar)
const uploadState = ref(false)
const percentCompleted = ref(0)





const genderGroup = [
	{value:0,text:'保密'},
	{value:1,text:'男'},
	{value:2,text:'女'}
]

const clickID = (id)=>{
	console.log(id)
	uni.setClipboardData({
		data: id,
		success: function () {
			uni.showToast({
				title: '复制成功',
				icon: 'none'
			})
		}
	})
}

const clickUserName = ()=>{
	userNamePop.value.open()
}

const userNameConfirm = (e)=>{
	if(e) {
		userStore.updateUserInfo({username:e})
	}
}



// 点击修改性别
const clickGender = ()=>{
		genderPop.value.open()
}


// 切换性别
const genderChange = (e)=>{
	sex.value = Number(e.detail.value)
}

const genderConfirm = ()=>{
	userStore.updateUserInfo({gender:sex.value})
}



// 上传头像
const onChooseAvatar = (e)=>{
	// e.detail.avatarUrl 小程序的临时文件地址，换取真是的文件地址
	uploadState.value = true
	avatarUrl.value = e.detail.avatarUrl
	uniCloud.uploadFile({
		//也可以后缀使用最后的用户id 然后先删除对应的头像，在set 减少存储空间
	  filePath: avatarUrl.value,
	  cloudPath: `userAvatar/${formatDateDay(Date.now())}/${userInfo.value._id}_${formatDateHour(Date.now())}.jpg`,
		cloudPathAsRealPath: true,
	  success(res) {
			uploadState.value = false
			avatarUrl.value = res.fileID
			userStore.updateUserInfo({avatar:avatarUrl.value})
		},
	  fail(err) {
			console.log('fial:',err)
		},
		// 上传回调进度
		onUploadProgress: function(progressEvent) {
			percentCompleted.value = Math.round((progressEvent.loaded * 100) / progressEvent.total);
			console.log(progressEvent.value );
		}
	 
	});
	
	
} 




</script>

<style scoped lang="scss">
.userLayout{
	.avatar{
		padding:100rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.box{
			height: 150rpx;
			width: 150rpx;
			position: relative;
			.inner{
				width: 100%;
				height: 100%;				
				image{
					width: 100%;
					height: 100%;				
					border-radius: 50%;
					border:1px solid #eee;
				}
				.btn{
					position: absolute;
					top:0;
					left:0;
					width: 100%;
					height: 100%;	
					border-radius: 50%;
					opacity: 0;
				}
				.mask{
					position: absolute;
					background: rgba(0,0,0,0.6);
					color:#fff;
					top:0;
					left:0;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 22rpx;					
				}
			}
			
			.icon{
				width: 50rpx;
				height: 50rpx;
				background: #FE9468;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				border:2px solid #fff;
				position: absolute;
				right:0;
				bottom:0;
				pointer-events: none;
			}
			.text{
				font-size: 25rpx;
				color:#999;
				white-space: nowrap;
				padding:20rpx 0;
				text-align: center;
			}
		}
	}
	.list{
		padding:50rpx 0rpx;		
	}
}


.genderForm{
	.radio{
		padding:0 10rpx;		
	}
}


</style>
